<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
#box{
	width: 500px;
	height: 300px;
	border: 10px;
	padding: 8px;
	margin: 15px;
	overflow:auto;
	position: relative;
	background: green;
}
#box>div{
	width: 70px; height: 50px;background: #555;
	position: absolute;
}

</style>
<body>
	<div id="box">
		<div id="abc"></div>
	</div>

</body>
<script type="text/javascript">
/*
event:
target,id,className,e.stopPropagation(),
e.preventDefault
e.clientX,e.clientY 相对于窗口左上角
e.pageX,e.pageY 相对于文档左上角
 */



var arr=["clientWidth","clientHeight","offserwidth","offsetHeight","scrollWidth","scrollHeight","offsetLeft","offsetTop"];
/*
chrome,firefox,safira浏览器

clientWidth:padding+width
offsetWidth:padding+border+width
scrollWidth:里面内容所占的宽度+padding*1
scrollHeight:里面内容所占的高度+padding*2
没边框，没滚动条这三个通用
offsetLeft:元素左边框到浏览器的距离,有定位设置的时候相对于父元素的距离
BFC:浏览器的怪异模式，上下间距叠加，取最大间距
 */
var bax =document.getElementById("abc");
console.log(arr[6]+"---"+bax[arr[6]])
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]+"---"+box[arr[i]]);
}
document.onmouseover=function(e){
console.log(e.clientX,e.clientY);
console.log(e.pagex,e.pag)
}



/*
width height
clientWidth clientHeight//不包括边框
offserwidth offsetHeight//包括边框
scrollWidth scrollHeight//包括滚动条的部分

mousedown:鼠标按下
mousemove：鼠标移动
mouseup：松开鼠标
*/
</script>
</html>